<template>
	<uni-popup ref="popupRef" type="bottom" :safe-area="false">
		<view class="main">
			<view class="main-title">
				{{ info.headline }}
			</view>
			<view class="main-body">
				<scroll-view :scroll-top="50" scroll-y="true" class="scroll-Y">
					<view v-html="decodeURIComponent(info.content)"></view>
				</scroll-view>
			</view>
			<view class="main-btn" @click="close">
				<image src="@/static/icon/close1.png" mode="aspectFill" style="width: 26rpx; height: 26rpx;"></image>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		agreementGet,getByKey
	} from '@/api/user';
	let info = ref({})
	const popupRef = ref(null)
	const close = () => {
		popupRef.value.close()
	}
	const open = (name) => {
		if(name == '选品说明'){
			getByKey({
				merchantId: 0,
				paramCode: 'PRODUCT_SELECTION_MEETING'
			}).then(res=>{
				info.value = {
					headline:'选品说明',
					content: res.data[0].paramValue
				}
			})
		} else {
			agreementGet({
				headline: name
			}).then(res=>{
				info.value = res.data
			})
		}
		
		popupRef.value.open()
	}
	defineExpose({
		close,
		open
	})
</script>

<style lang="scss" scoped>
	.main {
		background-color: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
		&-title{
			font-weight: 500;
			font-size: 32rpx;
			color: #191B21;
			line-height: 44rpx;
			padding: 40rpx 0 32rpx;
			text-align: center;
		}
		&-body{
			padding: 0 42rpx 42rpx;
		}
		&-btn{
			position: absolute;
			top: 16rpx;
			right: 16rpx;
			padding: 26rpx;
		}
	}
	.scroll-Y {
		height: 600rpx;
	}
</style>